<template>
  <el-container>
    <component :is="currentPage" :message="row" :task-remark="taskRemark" :task="taskParam" @toChangePage="changePage" />
  </el-container>
</template>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

<script>
import list from './module/index'
import submitPage from './module/submitPage'
import submitForkPage from './module/submitForkPage'
import submitJoinPage from './module/submitJoinPage'
import submitBranchPage from './module/submitBranchPage'
import endPage from './module/endPage'
export default {
  components: {
    list, submitPage, submitForkPage, submitJoinPage, submitBranchPage, endPage
  },
  data: function() {
    return {
      row: {},
      taskParam: {},
      taskRemark: {},
      currentPage: 'list'
    }
  },
  created() {
    const obj = this.$route.params
    if (obj) {
      this.taskParam = obj
    }
  },
  methods: {
    changePage(page, row, taskRemark) {
      this.row = row
      this.taskRemark = taskRemark
      if (!page) {
        page = 'list'
      }
      this.currentPage = page
    }
  }
}
</script>
